
<script>
export default {
    setup() {


        return {}
    }
}
</script>


<template>
    <div class="footer">
        <div class="content">
            <div>
            <router-link to="/home" :class="$route.path=='/home'?'nav-color' :''">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-home"></use>
                </svg>
                首页
            </router-link>
        </div>
        <div>

            <router-link to="/cart" :class="$route.path=='/cart'?'nav-color' :''">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-cart"></use>
                </svg>
                购物车
            </router-link>
        </div>
        <div>

            <router-link to="/order" :class="$route.path=='/order'?'nav-color' :''">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-order"></use>
                </svg>
                订单
            </router-link>
        </div>
        <div>

            <router-link to="/mine" :class="$route.path=='/mine'?'nav-color' :''">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-mine"></use>
                </svg>
                我的
            </router-link>
        </div>

        </div>
    </div>
</template>



<style lang="scss" scoped>
.footer{
    position: fixed;
    width: 100%;
    bottom: 0px;
    background-color: #fff;
    padding-top: 5px;
}
.content {
    display: flex;
    justify-content: space-evenly;

    div>a {
        align-items: center;
        display: flex;
        flex-direction: column;

        svg {
            margin-bottom: 5px;
        }

        &.nav-color {
            color: #ffc400;
        }
    }
}
</style>